<template>
  <div class="login">
    <div class="main">
      <h3>后台管理系统</h3>
      <ak-form
        :after-submit="afterSubmit"
        :data="formData"
        :submit-url="loginConfig.config.loginApi"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useLayoutStore } from '@/store/layout'
  import { setStorage } from '@/utils'
  import { getRequest } from '@/api'
  import { flatToTree } from '@/utils/flatTree.ts'

  const props = defineProps({
    loginConfig: {
      type: Object,
      require: true
    }
  })
  console.log('loginConfig', props.loginConfig)
  const useStore = useLayoutStore()
  const router = useRouter()
  const route = useRoute()
  const formData = ref({
    list: [
      {
        type: 'input',
        control: {
          prefixIcon: 'User',
          modelValue: 'admin',
          placeholder: '请输入登录账号'
        },
        config: {},
        name: 'userName',
        formItem: { label: '用户名', showLabel: true },
        customRules: [
          { type: 'required', message: '请输入登录账号', trigger: 'blur' }
        ]
      },
      {
        type: 'password',
        control: {
          prefixIcon: 'Lock',
          modelValue: '123456',
          placeholder: '请输入密码'
        },
        config: {},
        name: 'password',
        formItem: { label: '密码', showLabel: true },
        customRules: [
          { type: 'required', message: '请输入密码', trigger: 'blur' }
        ]
      },
      {
        type: 'button',
        control: { label: '保存', type: 'primary', key: 'submit' }
      }
    ],
    form: { size: 'default' },
    config: {}
  })
  const afterSubmit = (type: string, res: any) => {
    if (type === 'success') {
      // 登录成功跳转
      const path = props.loginConfig.config.loginSuccessPath || '/'
      nextTick(() => {
        router.push({ path: path })
      })
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    background-color: #72767b;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main {
    width: 400px;
    padding: 25px;
    border-radius: 6px;
    background: #fff;

    h3 {
      font-size: 18px;
      text-align: center;
      font-weight: 400;
    }
  }

  .form-btn {
  }

  :deep(.el-button) {
    width: 100%;
  }
</style>
